.container{
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 26rpx;
  /* font-weight: bold; */
  color: #333333;
}
.textO8 {
  font-size: 20rpx;
  color: rgba(0,0,0,0.8);
  margin: 0 10rpx;
}
.textO2 {
  font-size: 20rpx;
  color: #999999;
  font-weight: normal;
}
.textO4 {
  font-size: 20rpx;
  color: #999999;
}
.textO {
  font-size: 20rpx;
  color: #FF5000;
  opacity: 0.8;
  margin: 0 10rpx;
}
.verticalScrollView {
  height: 87%;
  width: 100%;
}
.verticalScrollView1 {
  height: 69%;
  width: 100%;
}
.content {
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
}
.usesBalance {
  width: 100%;
  height:120rpx;
  display: flex;
  align-items:center;
  /* position: absolute;
  left: 0;
  top: -120rpx;
  z-index: 999000; */
}
.userIcon {
  width: 60rpx;
  height: 60rpx;
  margin: 0 30rpx;
  background: url("../../images/7.png") no-repeat center;
  background-size: 101% 101%;
  border-radius: 50%;
}
.rmbBalance {
  padding-left: 52rpx;
  position: relative;
  margin-right: 70rpx;
  line-height: 42rpx;
}
.rmbBalance::before {
  content: '';
  position: absolute;
  left: 0;
  top: -2rpx;
  width: 40rpx;
  height: 40rpx;
  background: url("../../images/1.png") no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
}
.qbBalance {
  composes: rmbBalance;
}
.qbBalance::before {
  background: url("../../images/2.png") no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
}
.taskSwiper {
  width: 100%;
}
.swiperImgShow {
  width: 100%;
  height: 176rpx;
  background: url("") no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
}
.roleBlock {
  width: 100%;
  height:64rpx;
  line-height: 64rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
  overflow: hidden;
}
.roleBlockWrap {
  text-align: center;
  display: flex;
  justify-content:center;
  animation:scroll 10s infinite  cubic-bezier(1,0,0.5,0) ;
}
.taskList {
  width: 100%;
  padding: 0 30rpx;
}
.taskListTitle {
  /* composes: textO8; */
  font-size: 28rpx;
  font-weight: bold;
  line-height: 32rpx;
  position: relative;
  padding:0 0 24rpx 24rpx;
  border-bottom: 1rpx solid #E4E4E4;
  display: flex;
}
.taskListTitle::before {
  position: absolute;
  left: 0;
  bottom: 24rpx;
  content: '';
  width: 8rpx;
  height: 32rpx;
  background: #FFD600;
  border-radius: 4rpx;
}
.taskListItem {
  width: 100%;
  height: 214rpx;
  display: flex;
  align-items:center;
  justify-content: space-between;
  border-bottom: 1rpx solid #E4E4E4;
  padding-left: 36rpx;
}
.taskListItem:nth-last-child(){
  border-top: 1px solid red;
}
.taskProgress {
  width: 480rpx;
}
.taskName {
  position: relative;
}
.taskName::before {
  content: '';
  left: -36rpx;
  bottom: 50%;
  margin-bottom: -16rpx;
  position: absolute;
  width: 28rpx;
  height: 28rpx;
  background: url("../../images/5.png") no-repeat center;
  background-size: cover;
}
.taskNameOver {
  composes: taskName;
}
.taskNameOver::before {
  background: url("../../images/3.png") no-repeat center;
  background-size: cover;
}
.taskProgressShow {
  width: 380rpx;
  height: 10rpx;
  border-radius: 200rpx;
  background: #F3F3F3;
  margin: 20rpx 0;
  position: relative;
}
.taskProgressShow1 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 200rpx;
  background-color: #FFD600;
}
.taskProgressShow1::after {
  position: absolute;
  top: 50%;
  margin-top: -15rpx;
  right: -4rpx;
  content: '';
  width: 30rpx;
  height: 30rpx;
  background: url("../../images/2.png") no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
}
.taskProgressNum {
  composes: textO4;
  position: absolute;
  right: -80rpx;
  top: 50%;
  margin-top: -15rpx;
}
.taskQB {
  composes: textO;
  position: relative;
  padding-left: 44rpx;
  left: 22rpx;

  margin:0 0 24rpx 0;
}
.taskQB::before {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -20rpx;
  content: '';
  width: 40rpx;
  height: 40rpx;
  background: url("../../images/2.png") no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
}
.taskQBOver {
  composes: taskQB;
  color: #999999;
}
.taskQBOver::before {
  background: url("../../images/4.png") no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
}
.taskPlay {
  padding-bottom: 40rpx;
}
.taskGo {
  composes: textO8;
  width: 100rpx;
  height: 46rpx;
  text-align: center;
  line-height: 48rpx;
  background: #FFD600;
  font-weight: bold;
  border-radius: 8rpx;
}
@keyframes scroll {
    0%{
         transform: translateY(0px);
    }
    25%{
         transform: translateY(-60rpx);
    }
     50%{
         transform: translateY(-120rpx);
     }
     74%{
         transform: translateY(-180rpx);
     }
     100%{
         transform: translateY(-240rpx);
     }
}
.loading {
  width: 100%;
  height: 100%;
  background: url("https://static.qiushibaike.com/mission/task/assets/images/loading.gif") no-repeat center;
  background-size: 200rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
